{% extends 'preheat/base.html' %}

{% block title %}登录 - CDN预热平台{% endblock %}

{% block content %}
<div class="container mt-8">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white text-center">
                    <h3>CDN预热平台 - 用户登录</h3>
                </div>
                <div class="card-body">
                    {% if form.errors %}
                    <div class="alert alert-danger" role="alert">
                        用户名或密码错误，请重新输入。
                    </div>
                    {% endif %}
                    
                    {% if next %}
                        {% if user.is_authenticated %}
                        <div class="alert alert-warning" role="alert">
                            您的账户没有权限访问此页面。请使用具有足够权限的账户登录。
                        </div>
                        {% else %}
                        <div class="alert alert-info" role="alert">
                            请登录以访问此页面。
                        </div>
                        {% endif %}
                    {% endif %}
                    
                    <form method="post" action="{% url 'preheat:login' %}">
                        {% csrf_token %}
                        
                        <div class="form-group">
                            <label for="{{ form.username.id_for_label }}">用户名：</label>
                            {{ form.username }}
                        </div>
                        
                        <div class="form-group">
                            <label for="{{ form.password.id_for_label }}">密码：</label>
                            {{ form.password }}
                        </div>
                        
                        <input type="hidden" name="next" value="{{ next }}" />
                        
                        <div class="form-group mt-4">
                            <button type="submit" class="btn btn-primary btn-block">登录</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .container {
        margin-top: 5rem;
    }
    
    .card {
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
    }
    
    .card-header {
        border-radius: 8px 8px 0 0;
        padding: 1rem;
    }
    
    .card-body {
        padding: 2rem;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-control {
        border-radius: 4px;
        border: 1px solid #ccc;
        padding: 0.75rem 1rem;
        width: 100%;
        font-size: 1rem;
    }
    
    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
        outline: none;
    }
    
    label {
        font-weight: 500;
        margin-bottom: 0.5rem;
        display: block;
    }
    
    .btn-block {
        width: 100%;
        padding: 0.75rem;
        font-size: 1rem;
        border-radius: 4px;
    }
    
    .alert {
        margin-bottom: 1.5rem;
        padding: 0.75rem 1rem;
        border-radius: 4px;
    }
</style>
{% endblock %}